<template>
  <div class="region_edit">
    <div class="viewPort" ref="viewPort">
      <el-card class="box-card" ref="boxCard">
        <div class="title">
          <span>修改区域信息</span>
        </div>
        <div class="detail">
          <div class="elForm">
            <el-form
              :model="edit"
              :rules="rules"
              ref="ruleForm"
              label-width="auto"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="区域名称" prop="reg_name">
                    <el-input v-model="edit.reg_name" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="区域类型" prop="reg_type">
                    <el-select
                      v-model="edit.reg_type"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="停车位总数" prop="reg_space_count">
                    <el-input
                      v-model.number="edit.reg_space_count"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="停车位剩余数量" prop="reg_space_count">
                    <el-input
                      v-model.number="edit.reg_space_count"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div style="margin-top: 25px" v-if="!next">
              <el-button icon="el-icon-arrow-left" @click="back"
                >返回</el-button
              >
            </div>
            <div
              class="next_btn"
              ref="next_btn"
              @click="nextStep"
              v-if="edit.reg_type === '单位'"
            >
              <div class="next_btn1">
                <span>绑定合作单位</span>
              </div>
              <div class="next_btn2">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
          <div class="bindSapce">
            <div class="spaceSearch">
              <el-input
                placeholder="请输入内容"
                v-model="searchData"
                clearable
                style="width: 220px"
              >
              </el-input>
              <el-button
                type="primary"
                icon="el-icon-search"
                style="margin-left: 15px"
                >搜索</el-button
              >
            </div>
            <el-card class="box-card2" shadow="hover">
              <div></div>
            </el-card>
          </div>
          <div class="btn" v-if="next">
            <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="margin: 50px 50px"
              >提交<i class="el-icon-arrow-right el-icon--right"></i
              ><i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Region_Add",
  props: ["regionData"],
  data() {
    return {
      next: false,
      edit: {
        reg_id: 2,
        org_id: 1,
        company_director: "",
        reg_name: "",
        reg_type: "",
        reg_space_count: 20,
        reg_space_recount: 14,
      },
      rules: {
        reg_name: [
          { required: true, message: "请输入区域名称", trigger: "blur" },
        ],
        reg_type: [
          { required: true, message: "请输入区域类型", trigger: "blur" },
        ],
        reg_space_count: [
          { required: true, message: "请输入停车位总数", trigger: "blur" },
        ],
        reg_space_recount: [
          { required: true, message: "请输入停车位剩余数量", trigger: "blur" },
        ],
      },
      searchData: "",
      options: [
        {
          value: "普通",
          label: "普通",
        },
        {
          value: "单位",
          label: "单位",
        },
      ],
    };
  },
  mounted() {
    const id = this.$route.params.id;
    let result = this.regionData.find((item) => {
      if (item.reg_id == id) {
        return item;
      }
    });
    this.edit = result;
  },
  methods: {
    back() {
      this.$store.commit("maskStatus_change", false);
      this.$router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.axios
          //   .post("/region/changeInfo", this.edit, {
          //     "Content-Type": "application/json",
          //   })
          //   .then((res) => {
          //     if (res.data.code === "200") {
          //       this.$message({
          //         message: res.data.msg,
          //         type: "success",
          //       });
          //       this.back();
          //     } else {
          //       this.$message.error(res.data.msg);
          //     }
          //   })
          //   .catch((err) => {
          //     console.error(err);
          //     this.$message.error("修改区域信息失败");
          //   });
        } else {
          this.$message({
            message: "请完整填写区域信息",
            type: "warning",
          });
          return false;
        }
      });
    },
    nextStep() {
      const viewPort = this.$refs.viewPort;
      const next_btn = this.$refs.next_btn;
      next_btn.style.display = "none";
      viewPort.classList.add("vnext");
      this.next = true;
    },
  },
};
</script>

<style scoped>
.viewPort {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-30%, 0);
  width: 490px;
  height: 620px;
  z-index: 999;
  overflow: hidden;
}
.vnext {
  transform: translate(-35%, 0);
  width: 980px;
  height: 620px;
  transition: all 0.6s ease;
}
.box-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 980px;
  height: 620px;
  z-index: 98;
}
.next {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(0, 15%);
}

.title {
  width: 90%;
  height: 5vh;
  padding: 0 0 0 30px;
  line-height: 3vh;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px dashed #c4c6c7;
}
.title span {
  display: inline-block;
  width: 80%;
  height: 55%;
  padding: 0px 20px;
  border-left: 5px solid #3b83cc;
}
.detail {
  position: relative;
  margin: 30px auto;
  width: 80%;
}
.detail /deep/ .el-input {
  width: 85%;
}
.detail /deep/ .el-select {
  width: 85%;
}
.detail /deep/ .el-form-item__error {
  margin-left: 8%;
}
.elForm {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 25vw;
}

.next_btn {
  color: #909399;
}
.next_btn1 {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translate(0, -130%);
  width: 2vw;
  height: 8vh;
}
.next_btn2 {
  position: absolute;
  right: -13%;
  top: 50%;
  transform: translate(0, -40%);
  width: 2vw;
  height: 8vh;
}
.next_btn:hover {
  cursor: pointer;
  color: #409eff;
}
.bindSapce {
  position: absolute;
  right: 0;
  top: 50%;
  width: 50%;
}

.box-card2 {
  margin-top: 20px;
  height: 23vh;
}
.btn {
  position: absolute;
  top: 320px;
  left: 30%;
}
</style>